<script lang="ts" setup>
import { ref, defineOptions } from 'vue'
import { ComponentSize } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
const group = ref('地区')
defineOptions({
  name: 'indexMain',
})
const value = ref('')
const carousel = ref(null)
const currentPage = ref(5)
const pageSize = ref(100)
const size = ref<ComponentSize>('large')

// 悬浮播放
const playVideo = (videoEl) => {
  videoEl.play().catch((error) => {
    // 处理自动播放策略导致的错误
    console.log('Video play failed:', error)
  })
}
// 暂停播放
const pauseVideo = (videoEl) => {
  videoEl.pause()
  videoEl.currentTime = 0
}
//分页设置
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
//分页设置
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
//搜索框点击分类按钮
const changeSearch = (text, index) => {
  group.value = text
  carousel.value.setActiveItem(index)
}
</script>
<template>
  <div class="block text-center">
    <el-carousel type="card" ref="carousel" height="480px" :motion-blur="true" :interval="4000">
      <!-- <el-carousel-item v-for="item in 4" :key="item">
        <el-image :src="'/src/assets/home/home' + item + '.png'" fit="fill" />
      </el-carousel-item> -->
      <el-carousel-item>
        <video
          src="/src/assets/home/video1.mp4"
          ref="videoRefs"
          style="width: 100%; height: 100%"
          muted
          loop
          @mouseenter="playVideo($event.target)"
          @mouseleave="pauseVideo($event.target)"
        ></video>
      </el-carousel-item>
      <el-carousel-item>
        <el-image :src="'/src/assets/home/home1.png'" fit="fill" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image :src="'/src/assets/home/home2.jpeg'" fit="fill" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image :src="'/src/assets/home/home3.jpeg'" fit="fill" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image :src="'/src/assets/home/home4.jpeg'" fit="fill" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image :src="'/src/assets/home/home5.jpeg'" fit="fill" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image :src="'/src/assets/home/home6.jpeg'" fit="fill" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image :src="'/src/assets/home/home7.jpeg'" fit="fill" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image :src="'/src/assets/home/home8.jpeg'" fit="fill" />
      </el-carousel-item>
      <el-carousel-item>
        <el-image :src="'/src/assets/home/home9.jpeg'" fit="fill" />
      </el-carousel-item>
      <div class="cartgroup">
        <el-button @click="changeSearch('地区', 0)">地区</el-button>
        <el-button @click="changeSearch('美食', 1)">美食</el-button>
        <el-button @click="changeSearch('风景', 2)">风景</el-button>
        <el-button @click="changeSearch('酒店', 3)">酒店</el-button>
      </div>
      <el-input v-model="value" :placeholder="group" :prefix-icon="Search" style="width: 100%" />
    </el-carousel>
    <div class="masonry">
      <div class="masonry-item" v-for="(item, index) in 12" :key="index">
        <el-card class="card" shadow="hover" style="max-width: 450px">
          <el-image :src="'/src/assets/home/home1.png'" fit="fill" />
          <div class="card-text"><p>云南</p></div>
        </el-card>
      </div>
    </div>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :size="size"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-carousel__container) {
  position: relative;
  .el-input__wrapper {
    position: absolute;
    margin-left: 34%;
    height: 40px;
    width: 30%;
    margin-top: 22%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.2); /* 半透明背景，必要！ */
    backdrop-filter: blur(10px); /* 高斯模糊 */
    -webkit-backdrop-filter: blur(10px);
  }
  .cartgroup {
    position: absolute;
    margin-left: 42%;
    margin-top: 20%;
    z-index: 999;
    .el-button {
      background: rgba(0, 0, 0, 0.2); /* 半透明背景，必要！ */
      backdrop-filter: blur(10px); /* 高斯模糊 */
      -webkit-backdrop-filter: blur(10px);
    }
  }
}

.masonry {
  column-count: 4;
  // column-gap: 10px;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: center;
  // align-content: flex-start;
  // gap: 50px;
  // border: 1px solid black;
  .masonry-item {
    // break-inside: avoid;
    margin-bottom: 10px;
    :deep(.el-card__body) {
      padding: 0;
    }
  }
  .card {
    position: relative;
    overflow: hidden;
  }
  .el-image {
    // width: 100%;
    // height: 100%;
    display: block; //没理解
  }
  .card-text {
    position: absolute;
    bottom: -100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    z-index: 2;
    transition: bottom 0.3s ease;
  }
  .card:hover .card-text {
    bottom: 0;
  }
}
</style>
